<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WebGl 3dsmax object loading -- game</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/Three.js" type="text/javascript" ></script>
<script src="js/Orbit.js" type="text/javascript" ></script>
<script src="js/Detector.js"></script>
<script src="js/Stats.js"></script>

<script>
	var camera, scene, renderer, geometry, material, mesh, image, texture;
	
	var isUpArrowDown=false,isRightArrowDown=false,isDownArrowDown=false,isLeftArrowDown=false;
	var isShiftKeyDown = false;
	
	var coMoveSpeed = 1;
	var coVariationSpeed = 0.5;
	var coRotationSpeed = 0.005;
	
	var cZ=655,cY=12,cX=0;
	var oZ=650,oY=10,oX=0;
	var oRZ=0,oRY=0,oRX=0;
	
	var increaseSpeed = 1;
	
	
	function afterLoad(){
		initScene();
		addObjects();
		render();		
	}
	
	function initScene(){
		
		/*
		* creates a new Three.Scene object , which will contain furthur objects which will be created..
		*/
		scene=new THREE.Scene();
		
		/*
		* Camera is the viewing position of the scene , we are using PerspectiveCamera..
		* by default it is placed at (0,0,0) so moving z-axis little backward for better viewing 
		*/
		camera=new THREE.PerspectiveCamera(50,(window.innerWidth-20)/(window.innerHeight-20),1,100000);
		//camera=new THREE.CombinedCamera( window.innerWidth /2, window.innerHeight/2, 70, 1, 10000, -10000, 10000, 10000 );
		camera.position.x = cX;
		camera.position.y = cY;
		camera.position.z = cZ;		
		
		renderer = new THREE.WebGLRenderer();
		renderer.setSize( window.innerWidth-20, window.innerHeight-20);
		
		scene.add(camera);
		
		controls= new THREE.TrackballControls(camera,renderer.domElement);
		//controls = new THREE.OrbitControls(camera,renderer.domElement);
		
		document.body.appendChild(renderer.domElement);
	}
	
	function addObjects(){
		
		var ambient = new THREE.AmbientLight(0x2e2e8b);
        scene.add(ambient);
		
		var directionalLight = new THREE.DirectionalLight(0x6ce6d9);
        directionalLight.position.set(0, 0, 1).normalize();
        scene.add(directionalLight);
		
		directionalLight = new THREE.DirectionalLight(0x6ce6d9);
        directionalLight.position.set(0, 1, 0).normalize();
        scene.add(directionalLight);
		
		
		var loader = new THREE.JSONLoader();
 
		var createMesh = function( geometry )
		{
			var zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
			zmesh.position.set( 0, 0, 0 );
			zmesh.scale.set( 6, 6, 6 );
			zmesh.overdraw = true;
			scene.add( zmesh );
		};
		
		var createMesh1 = function( geometry )
		{
			var zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
			zmesh.position.set( 0, 50, 0 );
			zmesh.scale.set( 60, 60, 60 );
			zmesh.overdraw = true;
			scene.add( zmesh );
		};
		 
		loader.load( "3dsmaxjson/scenery.js", createMesh );
		loader.load( "3dsmaxjson/benz.js", createMesh1 );
		
	  	image = new Image();
	  	image.src = 'textures/plane.png';
		
	  	texture = new THREE.Texture(image);
	  	image.tex = texture;
		
	  	image.onload = function() {
			this.tex.needsUpdate = true;
	  	};
		
	  	//material = new THREE.MeshBasicMaterial({color: 0x0000ff});
		material = new THREE.MeshBasicMaterial({map : texture});
		geometry = new THREE.CubeGeometry(3,0.1,5,1,1,1, material);
		
		mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());
		
		mesh.position.x = oX;
		mesh.position.y = oY;
		mesh.position.z = oZ;
		scene.add(mesh);
		document.addEventListener('keydown', function(e){
			moveObjectCamers(e.keyCode);
		});
		document.addEventListener('keyup', function(e){
			stopObjectCamers(e.keyCode);
		});
	}
	
	function moveObjectCamers(keycode){
		switch (keycode){
			case 16://shift
				if(!isShiftKeyDown){
					isShiftKeyDown = true;
					//increaseSpeed = 1;
				}
				break;
			case 37://left
				isLeftArrowDown = true;
				break;
			case 38://up
				isUpArrowDown = true;
				break;
			case 39://right
				isRightArrowDown = true;
				break;
			case 40://down
				isDownArrowDown = true;
				break;
		}
	}
	
	function stopObjectCamers(keycode){
		switch (keycode){
			case 16://shift
				if(isShiftKeyDown){
					isShiftKeyDown = false;
				}
				break;
			case 37://left
				isLeftArrowDown = false;
				break;
			case 38://up
				isUpArrowDown = false;
				break;
			case 39://right
				isRightArrowDown = false;
				break;
			case 40://down
				isDownArrowDown = false;
				break;
		}
	}
	
	function render() {
		requestAnimationFrame(render);
		controls.update();
		
		moveObject();
        renderer.render(scene,camera);		
    }
	
	function moveObject(){
		
		if(isShiftKeyDown){
			increaseSpeed += 0.2;			
			cZ-=increaseSpeed;
			oZ-=increaseSpeed;
		}else{
			if(increaseSpeed>0){
				increaseSpeed -= 0.15;
				cZ-=increaseSpeed;
				oZ-=increaseSpeed;
			}else{
				cZ-=coMoveSpeed;
				oZ-=coMoveSpeed;
			}
		}
		
		if(isLeftArrowDown){
			oX-=coVariationSpeed;
			oRZ+=coRotationSpeed;
			
			cX-=coVariationSpeed;
		}
		
		if(isUpArrowDown){
			oY-=coVariationSpeed;
			oRX-=coRotationSpeed;
			
			cY-=coVariationSpeed;
		}
		
		if(isRightArrowDown){
			oX+=coVariationSpeed;
			oRZ-=coRotationSpeed;
			
			cX+=coVariationSpeed;
		}
		
		if(isDownArrowDown){
			oY+=coVariationSpeed;
			oRX+=coRotationSpeed;
			
			cY+=coVariationSpeed;			
		}
		
		mesh.position.x = oX;
		mesh.position.y = oY;
		mesh.position.z = oZ;
		
		mesh.rotation.x = oRX;
		mesh.rotation.y = oRY;
		mesh.rotation.z = oRZ;
		
		camera.lookAt(cX,cY,cZ);
		camera.position.x=cX;
		camera.position.y=cY;
		camera.position.z=cZ;
	}
</script>
</head>

<body onload="afterLoad();">
</body>
</html>